<template>
  <div class="container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="种植" name="种植">
          <div class="container">
            <el-row>
                <el-col :span="5">
                    <div style="width:200px;height:200px; border:1px solid #ccc;">  
                        <!-- <img  :src="api + ruleForm.plantImg" alt="" style="width:100%;height:100%;"> -->
                        图片
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-row>
                      <el-col>
                        <span style="font-size:18px; font-weight:600;margin-right:40px;">天麻</span>
                        <span>种植批次号:</span>
                      </el-col>
                      <el-col style="margin:30px 0;font-size:14px;display:flex;justify-content:space-between;">
                        <span>种植面积：亩</span>
                        <span>种植地块：</span>
                        <span>种植时间：</span>
                      </el-col>
                      <el-col style="background:rgba(232, 241, 255, 1);border-radius:5px;height:100px;padding:0 40px;" >
                        <el-row>
                          <el-col style="height:50px;line-height:50px;" :span="14">生长：</el-col>
                          <el-col style="height:50px;line-height:50px;" :span="10">预计收获时间：</el-col>
                          <el-col style="height:50px;line-height:50px;" :span="14">种苗数量：</el-col>
                          <el-col style="height:50px;line-height:50px;" :span="10">种植人：</el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                </el-col>
            </el-row>
          </div>
          <div style="margin:30px 30px 0px 30px;">
            <el-row :gutter="30" type="flex" justify="space-between">
              <el-col>
                <div class="containers">
                  <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                  <div style="margin: 20px 0;height:35px;line-height:35px;">
                    <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                    <el-button style="float:right"  type="primary">追溯信息</el-button>
                  </div>
                  <div class="small_title">除草</div>
                  <div style="width:100%;height:100px;">图片</div>
                </div>
              </el-col>
              <el-col>
                <div class="containers" >
                  <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                  <div style="margin: 20px 0;height:35px;line-height:35px;">
                    <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                    <el-button style="float:right"  type="primary">追溯信息</el-button>
                  </div>
                  <div class="small_title">除草</div>
                  <div style="width:100%;height:100px;">图片</div>
                </div>
              </el-col>
              <el-col>
                <div class="containers">
                  <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                  <div style="margin: 20px 0;height:35px;line-height:35px;">
                    <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                    <el-button style="float:right"  type="primary">追溯信息</el-button>
                  </div>
                  <div class="small_title">除草</div>
                  <div style="width:100%;height:100px;">图片</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="采收" name="采收">
          <div class="container">
            <el-row>
                <el-col :span="5">
                    <div style="width:200px;height:200px; border:1px solid #ccc;">  
                        <!-- <img  :src="api + ruleForm.plantImg" alt="" style="width:100%;height:100%;"> -->
                        图片
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-row>
                      <el-col>
                        <span style="font-size:18px; font-weight:600;margin-right:40px;">天麻</span>
                        <span>种植批次号:</span>
                      </el-col>
                      <el-col style="margin:30px 0;font-size:14px;display:flex;justify-content:space-between;">
                        <span>种植面积：亩</span>
                        <span>种植地块：</span>
                        <span>种植时间：</span>
                      </el-col>
                      <el-col style="background:rgba(232, 241, 255, 1);border-radius:5px;height:100px;padding:0 40px;" >
                        <el-row>
                          <el-col style="height:50px;line-height:50px;" :span="14">生长：</el-col>
                          <el-col style="height:50px;line-height:50px;" :span="10">种植人：</el-col>
                          <el-col style="height:50px;line-height:50px;" :span="14">种苗数量：</el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                </el-col>
            </el-row>
          </div>
          <div class="container" style="margin:30px 0;">
            <el-row>
              <el-col :span="12">
                <div style="height:50px;line-height:50px;">采收方式：</div>
                <div style="height:50px;line-height:50px;">采收批号：</div>
                <div style="height:50px;line-height:50px;">开始时间：</div>
              </el-col>
              <el-col :span="12">
                <div style="height:50px;line-height:50px;">采收面积：</div>
                <div style="height:50px;line-height:50px;">负责人：</div>
                <div style="height:50px;line-height:50px;">结束时间：</div>
              </el-col>
            </el-row>
          </div>
          <div>
            <el-row :gutter="30" type="flex" justify="space-between">
              <el-col>
                <div class="containers">
                  <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                  <div style="margin: 20px 0;height:35px;line-height:35px;">
                    <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                    <el-button style="float:right"  type="primary">追溯信息</el-button>
                  </div>
                  <div style="width:100%;height:100px;">图片</div>
                </div>
              </el-col>
              <el-col>
                <div class="containers" >
                  <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                  <div style="margin: 20px 0;height:35px;line-height:35px;">
                    <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                    <el-button style="float:right"  type="primary">追溯信息</el-button>
                  </div>
                  <div style="width:100%;height:100px;">图片</div>
                </div>
              </el-col>
              <el-col>
                <div class="containers">
                  <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                  <div style="margin: 20px 0;height:35px;line-height:35px;">
                    <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                    <el-button style="float:right"  type="primary">追溯信息</el-button>
                  </div>
                  <div style="width:100%;height:100px;">图片</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <el-tab-pane label="加工" name="加工">
          <el-table
              :data="tableData1"
              border
              ref="multipleTable"
              header-cell-class-name="table-header"
              style="margin-bottom:30px;"
          >
              <el-table-column prop="name" sortable label="品名"></el-table-column>
              <el-table-column prop="id" sortable label="批号"></el-table-column>
              <el-table-column prop="type" sortable label="来源"></el-table-column>
              <el-table-column prop="type" sortable label="地块/供应商"></el-table-column>
              <el-table-column prop="type" sortable label="数量"></el-table-column>
          </el-table>
          <h3>加工信息</h3>
          <div style="margin:30px 0;">加工工艺:天麻加工工艺流程</div>
          <el-row :gutter="30" type="flex" justify="space-between">
            <el-col>
              <div class="containers">
                <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                <div style="margin: 20px 0;height:35px;line-height:35px;">
                  <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                  <el-button style="float:right"  type="primary">追溯信息</el-button>
                </div>
                <div class="small_title">除草</div>
                <div style="width:100%;height:100px;">图片</div>
              </div>
            </el-col>
            <el-col>
              <div class="containers" >
                <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                <div style="margin: 20px 0;height:35px;line-height:35px;">
                  <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                  <el-button style="float:right"  type="primary">追溯信息</el-button>
                </div>
                <div class="small_title">除草</div>
                <div style="width:100%;height:100px;">图片</div>
              </div>
            </el-col>
            <el-col>
              <div class="containers">
                <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                <div style="margin: 20px 0;height:35px;line-height:35px;">
                  <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                  <el-button style="float:right"  type="primary">追溯信息</el-button>
                </div>
                <div class="small_title">除草</div>
                <div style="width:100%;height:100px;">图片</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="30" style="margin-top:30px;">
            <el-col :span="8">
              <div class="containers">
                <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                <div style="margin: 20px 0;height:35px;line-height:35px;">
                  <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                  <el-button style="float:right"  type="primary">追溯信息</el-button>
                </div>
                <div class="small_title">除草</div>
                <div style="width:100%;height:100px;">图片</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="containers">
                <div><span style="display:inline-block;font-weight:600;width:100px;">操作时间</span>1111</div>
                <div style="margin: 20px 0;height:35px;line-height:35px;">
                  <span style="display:inline-block;font-weight:600;width:100px;">操作人</span>1111 
                  <el-button style="float:right"  type="primary">追溯信息</el-button>
                </div>
                <div class="small_title">除草</div>
                <div style="width:100%;height:100px;">图片</div>
              </div>
            </el-col>
          </el-row>

          <div class="container" style="margin-top:30px;">
            <h3 style="margin-bottom:30px;">成品信息</h3>
            <el-table
              :data="tableData1"
              border
              ref="multipleTable"
              header-cell-class-name="table-header"
              style="margin-bottom:30px;"
            >
              <el-table-column prop="name" sortable label="品名"></el-table-column>
              <el-table-column prop="id" sortable label="批号"></el-table-column>
              <el-table-column prop="type" sortable label="品级"></el-table-column>
              <el-table-column prop="type" sortable label="成品数量"></el-table-column>
              <el-table-column prop="type" sortable label="关联产品介绍"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="检测检验" name="检测检验">
          <el-row :gutter="30" type="flex" justify="space-between">
            <el-col v-for="(i,k) in 4" :key="k">
              <div class="containers flex between" style="background:#409EFF;">
                <div>图片</div>
                <div>
                  <div style="color: rgba(255, 255, 255, 1);font-size: 20px;font-weight:600;">天麻</div>
                  <div style="color: rgba(255, 255, 255, 1);margin-top:5px;">产品名称</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="container" style="margin-top:30px;">
            <h3>检测检验</h3>
            <el-row style="margin-top:10px;">
              <el-col :span="12">
                <div style="height:50px;line-height:50px;">检测机构:</div>
                <div style="height:50px;line-height:50px;">检测标准:</div>
                <div style="height:50px;line-height:50px;">检测结果:</div>
                <div style="height:50px;line-height:50px;">
                  检测报告:
                  <span style="display:inline-block; width:100px;height:100px;">图片</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div style="height:50px;line-height:50px;">检测负责人:</div>
                <div style="height:50px;line-height:50px;">检测时间:</div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="仓储" name="仓储">
          <el-row :gutter="30" type="flex" justify="space-between">
            <el-col v-for="(i,k) in 4" :key="k">
              <div class="containers flex between" style="background:#409EFF;">
                <div>图片</div>
                <div>
                  <div style="color: rgba(255, 255, 255, 1);font-size: 20px;font-weight:600;">天麻</div>
                  <div style="color: rgba(255, 255, 255, 1);margin-top:5px;">产品名称</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="container" style="margin-top:30px;">
            <h3>出入库明细</h3>
            <el-table
              :data="tableData1"
              border
              ref="multipleTable"
              header-cell-class-name="table-header"
              style="margin-top:20px;"
            >
              <el-table-column prop="name" sortable label="类型"></el-table-column>
              <el-table-column prop="id" sortable label="规格"></el-table-column>
              <el-table-column prop="type" sortable label="数量"></el-table-column>
              <el-table-column prop="type" sortable label="时间"></el-table-column>
              <el-table-column prop="type" sortable label="客户名称"></el-table-column>
              <el-table-column prop="type" sortable label="追溯码"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="footerFixed" >
			  <el-button style="margin-left: 120px;" type="primary" @click="backPage">返回</el-button>
			</div>
      
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName:'种植',
      tableData1:[],
    }
  },
  created(){
    let type = this.$route.query.type
    if(type == '种植'){
      this.activeName = '种植'
    }else if(type == '采收'){
      this.activeName = '采收'
    }else if(type == '初加工'){
      this.activeName = '加工'
    }else if(type == '采购入库'){
      this.activeName = '仓储'
    }else{
      this.activeName = '检测检验'
    }
  },
  methods: {
    handleClick(tab,event){
      if (this.activeName == '种植') {
          this.init1()
      } else if(this.activeName == '采收') {
          this.init2()
      } else if(this.activeName == '加工'){
          this.init3()
      } else if(this.activeName == '检测检验'){
          this.init4()
      } else if(this.activeName == '仓储'){
          this.init5()
      }
    },
    backPage(){

    },
    init1(){

    },
    init2(){

    },
    init3(){

    },
    init4(){

    },
    init5(){

    },
  },

}
</script>
<style scoped>
  .flex{
    display: flex;
  }
  .center{
    justify-content: center;
    align-items: center;
  }
  .between{
    justify-content: space-between;
  }
  .around{
    justify-content: space-around;
  }
  .containers{
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: relative;
  }
  .small_title{
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(0, 118, 255, 1);
    border: 1px solid rgba(255, 0, 0, 0);
    color: white;
    width: 30px;
    height: 60px;
    line-height: 30px;
    text-align: center;
  }
</style>